<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inputstream Data Viewer</title>
    <link rel="stylesheet" href="../../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <!--
    <link rel="stylesheet" href="tasks-v2.css">
	-->
</head>
<body>

	<div id="app" class="" style="padding:20px">
		<div class=""><h2>输入流数据浏览 <small>Inputstream Data Viewer</small></h2></div>
		<hr />
		<!--  <div id="searchDiv" class="" style="background-color:#F0FFFF">  -->
		<div id="searchDiv" class="" style="background-color:#FFFACD">
		<fieldset>
			<!-- <legend></legend> -->
			<p>请输入查询条件</p>
			<form id="inputQuery">
			Begin Time <input type="text" name="begintime" v-model="begintime">
			End Time <input type="text" name="endtime" v-model="endtime">
			Remote Device Id <input type="text" name="remotedevice" v-model="remotedevice">
			Search <input name="query" v-model="searchQuery">
			</form>
			<div class="" >
				<button class="btn btn-primary" style="float:right" v-on="click:search">....    查 ... 询    ....</button>
				<br />
			</div>
		</fieldset>
		</div>
		<hr />
		<div>
			<button class="btn btn-default " v-on="click:removeSelected($event)">删除选中记录</button>
		</div>
		<div class="table-responsive">
			<table class="table table-bordered table-condensed table-striped">
			<thead>
				<tr class="info"> 
				<th>选择</th> 
				<th>时刻</th> 
				<th>设备标识</th> 
				<th>数据</th> 
				</tr> 
				<tr> 
				<th>#</th> 
				<th>Timestamp</th> 
				<th>Device Node</th> 
				<th>Payload</th> 
				</tr> 
			</thead>
			<tfoot>Table footer</tfoot>			
			<tbody>
				<!--
				<tr class="list-group-item item" v-repeat="item:items" track-by="rowid">
				-->
				<tr v-repeat="item:items" track-by="rowid">
				<td><input type="checkbox" v-model="item.selected"> {{item.selected ? "yes" : "no"}}</td> 
				<td>{{item.timestamp}}</td> 
				<td>{{item.node}}</td> 
				<td>{{item.frame}}</td> 
				</tr> 
			</tbody>
			</table>
		</div>
	
		<div>
		注：输入流数据来自实际测试过程中记录的数据文件。本模块仅用于查看数据的内容以辅助判断数据的正确性。
		</div>
		
		<hr />
		<div>
		for Debug only: 
		<pre>
			<div>{{ $data | json }}</div>
		</pre>	
		</div>
	</div>

    <script src="../../lib/jquery/2.1.4/jquery-2.1.4.min.js"></script>
    <script src="../../lib/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="../../lib/vue/0.12.10/vue.js"></script>
    <script src="stream-readonly-v3.js"></script>
</body>
</html>